
import { Vector2 } from "@/utils/Vector2"
import { CustomElement } from "@/js/components/CustomElement"
import { Path } from "@/js/components/Path"
import { Svg } from "@/js/components/Svg"

export class Group extends CustomElement {
    list: CustomElement[] = [];
    constructor() {
        super();
    }

    push(e: CustomElement) {
        this.list.push(e);
        this.appendChild(e);
    }

    remove(e: number | CustomElement) {
        if (typeof e == "number") {
            if (e >= 0 && e < this.list.length) {
                this.removeChild(this.list[e]);
                this.list.splice(e, 1);
            }
        }
        else if (e instanceof CustomElement) {
            const i = this.list.indexOf(e);
            if (i >= 0 && i < this.list.length) {
                this.removeChild(this.list[i]);
                this.list.splice(i, 1);
            }

        }

    }

    pop() {
        const i = this.list.length - 1;
        if (i >= 0 && i < this.list.length) {
            this.removeChild(this.list[i]);
            const e = this.list[i];
            this.list.splice(i, 1);

            return e;
        }
    }

    get(i: number) {
        return this.list[i];
    }
}

export class Line extends Group {
    svg: Svg;
    path: Path;
    startObject: any;
    endObject: any;

    pointStart: Vector2 = new Vector2(0, 0);
    pointEnd: Vector2 = new Vector2(100, 100);

    constructor() {
        super();

        this.svg = new Svg().setStyle({});

        this.path = new Path()
        this.path.stroke("gray")
        this.path.strokeWidth(2)
        this.path.fill("none")

        this.svg.appendChild(this.path)

        this.push(this.svg);
        this.update();
        this.setStyle({
            "pointer-events": "none",
            "z-index": 0,
            "position": "absolute",
            'display': 'flex',
            'align-items': 'center',
        })
        this.svg.pointerEvents("none")
        this.path.pointerEvents("none")

    }

    quadrant() {
        if (this.pointEnd.x > this.pointStart.x && this.pointEnd.y < this.pointStart.y) {
            return 1;
        }
        else if (this.pointEnd.x < this.pointStart.x && this.pointEnd.y < this.pointStart.y) {
            return 2;
        }
        else if (this.pointEnd.x < this.pointStart.x && this.pointEnd.y > this.pointStart.y) {
            return 3;
        }
        else {
            return 4;
        }
    }

    update() {
        let w = Math.abs(this.pointEnd.x - this.pointStart.x);
        const h = Math.max(
            Math.abs(this.pointEnd.y - this.pointStart.y),
            8
        )
        const r = Math.min(w * 1.5,500);
        w += r;

        let left = 0;
        let top = 0;

        const quadrant = this.quadrant();
        if (quadrant == 1) {
            left = this.pointStart.x - r/2;
            top = this.pointEnd.y;

            this.path.set([
                w-r/2, 0, Path.M,
                w-r*0.8,0,Path.C,
                r*0.8,h,Path.C_,
                r/2, h, Path.C_,
            ]);
        }
        if (quadrant == 2) {
            left = this.pointEnd.x - r/2;
            top = this.pointEnd.y;

            this.path.set([
                r/2, 0, Path.M,
                0, 0, Path.C,
                w, h, Path.C_,
                w - r/2, h, Path.C_,
            ]);
        }
        if (quadrant == 3) {
            left = this.pointEnd.x - r/2;
            top = this.pointStart.y;
            
            this.path.set([
                r/2, h, Path.M,
                0, h, Path.C,
                w, 0, Path.C_,
                w - r/2, 0, Path.C_,
            ]);
        }
        else if (quadrant == 4) {
            left = this.pointStart.x - r/2;
            top = this.pointStart.y;

            this.path.set([
                r/2, 0, Path.M,
                r*0.8, 0, Path.C,
                w -  r*0.8, h, Path.C_,
                w - r/2, h, Path.C_,
            ]);
        }

        this.svg.setAttribute("viewBox", `0 0 ${w||1} ${h||0}`);

        this.svg.setStyle({
            width: w + "px",
            height: h + "px",
        });

        this.setStyle({
            left: left + "px",
            top: top + "px",
        });
    }

    set(index: number, x: number, y: number) {
        if (index == 0) {
            this.pointStart.set(x, y);
        }
        else {
            this.pointEnd.set(x, y);
        }

        this.update();
    }

    
}
